<template>
	<view class="card">
		<view class="head">
			<view class="timeType">
				<view v-if="currenType == 'day'">{{currentMonth}}</view>
				<view v-if="currenType == 'week'">{{currentYear}}</view>
				<view v-if="currenType == 'month'">{{currentYear}}</view>
			</view>
			<view>
				<view class="switchBox">
					<view v-for="(item, index) in tjType" :key="index" :class="
              item.type == currenType ? 'active swicthItem' : 'swicthItem'
            " @click="selectedType(item)">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 日 -->
	<view class="card" v-if="currenType == 'day'">
		<view class="content">
			<view>
				<zeng-calen :actDay="monthData" :chooseDay="chooseDay" @onDayClick="onDayClick"></zeng-calen>
				<view class="rule" @click="routeTo('/pages/clockIn/rule')">
					<view>
						<view>上下班打卡</view>
						<view class="rules">打卡规则：{{companyInfo.yardName}}</view>
					</view>
					<van-icon name="arrow"></van-icon>
				</view>
				<view class="dkDuan">
					<view class="dkDuanItem">
						<view>{{companyInfo.upTime}}</view>
						<view :class="dakaInfo?.morningJson?.clockStatus==null?'status':dakaInfo?.morningJson?.clockStatus=='NORMAL'?'zc status':'yc status'">
							<view>上班</view>
							<view v-if="dakaInfo?.morningJson?.clockStatusName">{{dakaInfo?.morningJson?.clockStatusName}} 
							<text v-if="dakaInfo?.morningJson.clockStatusName&&dakaInfo?.morningJson?.clockStatusName!='缺卡'">({{dakaInfo?.morningJson?.clockTime}})</text>
							</view>
						</view>
					</view>
					<view class="dkDuanItem">
						<view>{{companyInfo.downTime}}</view>
						<view  :class="dakaInfo?.afternoonJson?.clockStatus==null?'status':dakaInfo?.afternoonJson?.clockStatus=='NORMAL'?'zc status':'yc status'">
							<view>下班</view>
							<view v-if="dakaInfo?.afternoonJson?.clockStatusName">{{dakaInfo?.afternoonJson?.clockStatusName}} 
							<text v-if="dakaInfo?.afternoonJson.clockStatusName&&dakaInfo?.afternoonJson?.clockStatusName!='缺卡'">({{dakaInfo?.afternoonJson?.clockTime}})</text>
							</view>
						</view>
					</view>
				</view>
				<view></view>
			</view>
		</view>
	</view>
	<view>

		<view v-if="currenType == 'week'||currenType == 'month'"> 
			<view class="card">
				<view v-if="currenType == 'week'" class="qhDate">
					<view class="iconBox1" @click="qhweek('pre')">
						<van-icon name="arrow-left" />
					</view>
					<view style="flex: 1;">{{weekfw.firstDay}}-{{weekfw.lastDay}}</view>
					<view  class="iconBox1" @click="qhweek('next')">
						<van-icon name='arrow'></van-icon>
					</view>
				</view>
				<view v-if="currenType == 'month'"  class="qhDate">
					<view class="iconBox1" @click="qhmonth('pre')">
						<van-icon name="arrow-left" />
					</view>
					<view style="flex: 1;">{{monthfw.firstDay}}-{{monthfw.lastDay}}</view>
					<view  class="iconBox1" @click="qhmonth('next')">
						<van-icon name='arrow'></van-icon>
					</view>
				</view>
			</view>	
			<view class="card">
				
				<view>
					<view style="padding: 20rpx; display: flex"
						@click="routeTo('/pages/clockIn/checkDetails?type='+currenType)">
						<view style="flex: 1">上下班打卡</view>
						<van-icon name="arrow" color="#8D8D8D"></van-icon>
					</view>
					<view class="month_tj">
						<view class="progress">
							<view class="zc" :style="`width:${barwidth}`"></view>
							<view class="Yc"> </view>
						</view>

						<view>
							<view class="zcDay">正常天数 <text>{{weekMonthData.normalCount}}</text></view>
						</view>
						<view>
							<view class="ycDay">异常天数 <text>{{weekMonthData.abnormalCount}}</text></view>
						</view>
						<view class="month_type">
							<view class="month_type_item">
								<view>{{weekMonthData.lateCount}}</view>
								<view>迟到/次</view>
							</view>
							<view class="month_type_item">
								<view>{{weekMonthData.earlyCount}}</view>
								<view>早退/次</view>
							</view>
							<view class="month_type_item">
								<view>{{weekMonthData.lakeCount}}</view>
								<view>缺卡/次</view>
							</view>
							<view class="month_type_item">
								<view>{{weekMonthData.absenteeismCount}}</view>
								<view>旷工/次</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="card">
				<view style="padding: 20rpx; display: flex;align-items: center;"
					@click="routeTo('/pages/clockIn/checkDetails')">
					<view style="flex: 1">假勤/次</view>
					<van-icon name="arrow" color="#8D8D8D"></van-icon>
				</view>
				<view class="month_tj">
					<view class="month_type">
						<view class="month_type_item">
							<view>{{weekMonthData.holidayCount}}</view>
							<view>请假</view>
						</view>
						<view class="month_type_item">
							<view>{{weekMonthData.earlyCount}}</view>
							<view>补卡</view>
						</view>
						<view class="month_type_item">
							<view>{{weekMonthData.lateCount}}</view>
							<view>外出</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="card">
				<view style="padding: 20rpx; display: flex;align-items: center;"
					@click="routeTo('/pages/clockIn/checkDetails')">
					<view style="flex: 1">加班/分钟</view>{{weekMonthData.overworkMinute}}
					<van-icon name="arrow" color="#8D8D8D"></van-icon>
				</view>
			</view>
			<!-- <view class="card">
				<view style="padding: 20rpx; display: flex;align-items: center;"
					@click="routeTo('/pages/clockIn/checkDetails')">
					<view style="flex: 1">外出打卡/次</view>1
					<van-icon name="arrow" color="#8D8D8D"></van-icon>
				</view>
			</view> -->
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>
<script setup>
	import {
		OpenTimeClock,
		dailyTimeclockConfig,
		dailyTimeClock,
		openWeekMonth,
		OpenTimeClockStatisticsDay
	} from "@/api"
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		USER_INFO_KEY
	} from "@/enums/cacheEnum"
	const userInfo = ref(cache.get(USER_INFO_KEY))
	const actDay = ref([]); //用户选择的日期 
	import dayjs from 'dayjs'
	import * as timeDeal from "@/utils/time.js"
	const chooseDay = ref('') //实时时间 
	const currentMonth = ref('')
	const currentYear = ref('')
	const companyInfo = ref('')
	const barwidth = ref(0)
	const monthfw = ref('')
	const weekfw = ref({}) 
	const tjType = ref([{
			type: "day",
			name: "日"
		},
		{
			type: "week",
			name: "周"
		},
		{
			type: "month",
			name: "月"
		},
	]);
	const currenType = ref("day");
	const monthData = ref([]) //日历 当月打卡统计
	const dakaInfo = ref('')
	const weekMonthData = ref('') //周月统计
	
	const turn1=ref(0)
	const turn2=ref(0)
	onLoad(async () => {
		chooseDay.value = await timeDeal.formateDate(new Date(), 'Y-M-D')
		currentMonth.value = await timeDeal.formateDate(new Date(), 'Y-M')
		currentYear.value= new Date().getFullYear()
		getDayData()
		const result = await dailyTimeclockConfig({
			yardId: userInfo.value.yardId
		})
		companyInfo.value = result.data
		setTimeout(_ => {
			onDayClick(chooseDay.value)
		}, 1000)
		getMonthStartAndEnd()
	})
	const getDayData = async () => {
		const res = await OpenTimeClockStatisticsDay({
			yearMonthDay: chooseDay.value
		})
		monthData.value = res.data
	}

	const onDayClick = (date) => {
		let obj = monthData.value.find(v => {
			let arr = v.clockDate.split(" ")[0]
			if (arr == date) {
				return true
			}
		})
		dakaInfo.value = obj  
	};
	const routeTo = (url) => {
		uni.navigateTo({
			url: url,
		})
	}
	const selectedType = (item) => {
		currenType.value = item.type
		if (item.type == 'month') {
			turn2.value=0
			getMonth()
		}
		if (item.type == 'week') {
			turn1.value=0
			getweek()
		}
	};
	// 月统计
	const getMonth = async () => { 
		monthfw.value= await getMonthStartAndEnd()
       
		openWeekMonth({
			endDay: monthfw.value.lastDay,
			startDay: monthfw.value.firstDay
		}).then(res => {
			weekMonthData.value = res.data 
			barwidth.value = (res.data.normalCount / (res.data.normalCount + res.data.abnormalCount))*100+'%'
		})
	}
	// 周统计
	
	const getweek =async () => {   
		weekfw.value=await getWeekStartAndEnd('end',turn1.value) 
		openWeekMonth({
			startDay: weekfw.value.firstDay,
			endDay: weekfw.value.lastDay,
		}).then(res => {
			weekMonthData.value = res.data
			barwidth.value = (res.data.normalCount / (res.data.normalCount + res.data.abnormalCount))*100+'%' 
		})
	} 
	
	const getWeekStartAndEnd = () => {
		let date={
			firstDay: dayjs().add(turn1.value, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'),
			lastDay: dayjs().add(turn1.value, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD'),
		} 
	   return date
	}
	
	const getMonthStartAndEnd=()=>{
		let date={
			firstDay: dayjs().add(turn2.value, 'month').startOf('month').format('YYYY-MM-DD') ,
			lastDay: dayjs().add(turn2.value, 'month').endOf('month').format('YYYY-MM-DD'),
		} 
		return date
	}    
	
	// 切换周
	const qhweek=(type)=>{
		if(type=='pre'){
			turn1.value=turn1.value-1
			getweek()
		}else{
			turn1.value=turn1.value+1
			getweek()
		} 
	} 
	// 切换月
	const qhmonth=(type)=>{
		if(type=='pre'){
			turn2.value=turn2.value-1
			getMonth()
		}else{
			turn2.value=turn2.value+1
			getMonth()
		} 
	} 
</script>
<style lang="scss" scoped>
	.qhDate{
		display: flex;
		padding: 0 20rpx;
		text-align: center;
		.iconBox1{
			width: 50rpx;
			height: 50rpx;
			display: block;
			border-radius: 50%;
			background: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.month_tj {
		text-align: center;

		.month_type {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #6d6d6d;
			padding: 0 20rpx;
		}

		.zcDay {
			text-align: center;
			position: relative;
			font-size: 24rpx;
			padding-left: 50rpx;
			display: inline-block;

			&::after {
				content: "";
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #11bf71;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}

		.ycDay {
			text-align: center;
			position: relative;
			padding-left: 50rpx;
			margin-top: 10rpx;
			display: inline-block;
			font-size: 24rpx;

			&::after {
				content: "";
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #ff0000;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}

		.progress {
			width: 300rpx;
			height: 10rpx;
			border-radius: 10rpx;
			background: #ff0000;
			margin: 20rpx auto;
			position: relative;

			.zc {
				width: 33%;
				background: #11bf71;
				border-radius: 10rpx;
				height: 10rpx;
				top: 0;
				left: 0;
			}
		}
	}

	.dkDuan {
		position: relative;
		font-size: 30rpx;
		font-weight: 500;
		color: #3d3d33;
		padding-left: 20rpx;

		&::after {
			content: "";
			position: absolute;
			height: 80rpx;
			left: 60rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 2px;
			background: #e1e1e1;
		}

		.dkDuanItem {
			display: flex;
			padding: 50rpx 0;
			align-items: center;

			.status {
				padding-left: 30rpx;
				font-size: 24rpx;
				list-style: 2.5s;

				&.zc {
					color: #11bf71;
				}

				&.yc {
					color: #ff0000;
				}
			}
		}
	}

	.card {
		width: 690rpx;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.rule {
			display: flex;
			align-items: center;
			padding: 20rpx;
			font-size: 30rpx;
			color: #3d3d33;
			justify-content: space-between;
			border-bottom: 1px solid #e1e1e1;

			.rules {
				font-size: 26rpx;
				color: #b6b6b6;
				padding-top: 15rpx;
			}
		}
	}

	.head {
		display: flex;
		padding: 0 20rpx;
		align-items: center;

		.timeType {
			flex: 1;
		}

		.switchBox {
			background: #f5f5f5;
			width: 260rpx;
			height: 60rpx;
			border-radius: 5rpx;
			display: flex;
			padding: 5rpx;
			box-sizing: border-box;

			.swicthItem {
				width: 83rpx;
				height: 50rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;

				&.active {
					background: #fff;
					border-radius: 5rpx;
				}
			}
		}
	}
</style>